<template>
    <el-dialog
      class="thisdialog"
      :visible.sync="visible"
      title="导出设置">
      <div class="left">
        <el-scrollbar class='page-component__scroll'>
          <div class="bbox" >
            <el-checkbox-group  v-model="checkedCondition">
              <el-checkbox style="margin-left: 30px; width: 160px" v-for="item in allCondition" :label="item" :key="item"></el-checkbox>
            </el-checkbox-group>
          </div>
        </el-scrollbar>
      </div>
      <div>
        <el-button style="width: 170px ;margin-top: 5px" @click="outPut(false)">取消</el-button>
        <el-button style="width: 170px ;margin-top: 5px" type="primary" @click="outPut(true)">导出</el-button>
      </div>
    </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      allCondition: [],
      checkedCondition:[]
    }
  },
  methods: {
    init (val) {
      this.visible = true
      this.allCondition = val
    },
    outPut (is_yes) {
      if (is_yes === true) {
        if (this.checkedCondition.length !== 0) {
          this.$emit('refresh',this.checkedCondition)
          this.visible = false
        } else {
          this.$message('请至少选择一项')
        }
      } else {
        this.visible = false
      }
    }
  }
}
</script>
<style>

.left{
  height:100%;
  margin-top: -20px;
}

.page-component__scroll{
  height:100%;
}
.bbox{
  height:390px;
  width:180px;
}
.left .page-component__scroll .el-scrollbar__wrap {
  overflow-x: hidden;
}
.thisdialog .el-dialog {
  width: 400px;
  height: 500px
}
</style>

